<template>
  <div>
    <!-- 题目 -->
    <van-cell :title="$route.query.title">
      <template slot="extra">
        <span>{{ pageNumber }}/{{ idList.length || 1 }}</span>
        <van-icon
          @click="showChose = true"
          class="titleicon"
          name="label-o"
          color="#ee0a24"
        />
      </template>
    </van-cell>
    <!-- 题目渲染 -->
    <van-tabs v-model="active" animated>
      <van-tab v-for="(item, index) in resList" :key="index">
        <div class="container">
          <div class="contentText">
            <div class="question" v-html="item.materialContent"></div>
            <!-- 答题 单选 b * -->
            <div class="dragAnswer" v-if="item.type_id === 1">
              <van-cell>
                <template slot="icon">
                  <van-button
                    class="answericon"
                    round
                    size="mini"
                    type="info"
                    style="
                      backgroundColor: #e6f7ff;
                      color: #1890ff;
                      border: 1px solid #91d5ff;
                    "
                  >
                    单选题</van-button
                  >
                </template>
                <template> <span v-html="item.title"></span></template>
              </van-cell>

              <!-- 获取对象所有属性   判断单选框个数-->
              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 4"
              >
                <!--对象身上属性个数-->
                <!-- {{Object.getOwnPropertyNames(item.option).length-1+'个'}}  -->
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="C"> </van-radio
                  ><span class="radiotype">C、 </span
                  ><span class="radioText" v-html="item.option.C.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="D"> </van-radio
                  ><span class="radiotype">D、 </span
                  ><span class="radioText" v-html="item.option.D.option"></span>
                </div>
              </van-radio-group>

              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 3"
              >
                <!--对象身上属性个数-->
                {{ Object.getOwnPropertyNames(item.option).length - 1 + "个" }}
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="C"> </van-radio
                  ><span class="radiotype">C、 </span
                  ><span class="radioText" v-html="item.option.C.option"></span>
                </div>
              </van-radio-group>
              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 2"
              >
                <!--对象身上属性个数-->
                {{ Object.getOwnPropertyNames(item.option).length - 1 + "个" }}
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
              </van-radio-group>

              <!-- 答案解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span >答案:</span>
                  <span  class="blue"
                   
                   >{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 多选  -->
            <div class="dragAnswer mulinpt2" v-if="item.type_id === 2">
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    多选题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <div class="multiInput">
                    <input type="checkbox" name="selected" value="A" />
                    <span>A、</span>
                    <label for="checkbox" v-html="item.option.A.option"></label>
                  </div>
                  <div class="multiInput">
                    <input type="checkbox" name="selected" value="B" />
                    <span>B、</span>
                    <label for="checkbox" v-html="item.option.B.option"></label>
                  </div>
                  <div class="multiInput">
                    <input type="checkbox" name="selected" value="C" />
                    <span>C、</span>
                    <label for="checkbox" v-html="item.option.C.option"></label>
                  </div>
                  <div class="multiInput">
                    <input type="checkbox" name="selected" value="D" />
                    <span>D、</span>
                    <label for="checkbox" v-html="item.option.D.option"></label>
                  </div>
                  <div class="multiInput">
                    <input type="checkbox" name="selected" value="E" />
                    <span>E、</span>
                    <label for="checkbox" v-html="item.option.E.option"></label>
                  </div>
                </template>
              </van-cell>
              <van-butotn class="ensure">确定</van-butotn>
              <!-- 底部答案 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 问答题 b -->
            <div class="dragAnswer" v-if="item.type_id === 3">
              <van-cell>
                <template slot="icon">
                  <van-button
                    class="answericon"
                    round
                    size="mini"
                    style="
                      backgroundcolor: #fff1f0;
                      color: #f56c6c;
                      border: 1px solid #ffa39e;
                    "
                  >
                    问答题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-notice-bar :scrollable="false" text="本题暂不支持回答。" />
              <!-- 答案解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span>答案:</span>
                  <span class="blue">{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 不定项选择 -->
            <div class="dragAnswer" v-if="item.type_id === 4">
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    不定项选择题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <input type="checkbox" name="selected" value="82" /><label
                    for="checkbox"
                    >&emsp;多选</label
                  >
                </template>
              </van-cell>
              <!-- 答案解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 填空题  b *-->
            <div class="dragAnswer" v-if="item.type_id === 5">
              <van-cell>
                <template slot="icon">
                  <van-button
                    class="answericon"
                    round
                    size="mini"
                    style="
                      backgroundcolor: #e6fffb;
                      color: #13c2c2;
                      border: 1px solid #87e8de;
                    "
                  >
                    填空题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <!-- {{ item.correct_option.length }} -->
              <van-cell-group v-if="item.correct_option.length === 5">
                <van-field
                  v-model="inputvalue.value1"
                  :error="inputFlag.flag1"
                  label="1."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value2"
                  :error="inputFlag.flag1"
                  label="2."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value3"
                  :error="inputFlag.flag3"
                  label="3."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value4"
                  :error="inputFlag.flag4"
                  label="4."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value5"
                  :error="inputFlag.flag5"
                  label="5."
                  placeholder="请输入答案"
                />
              </van-cell-group>
              <van-cell-group v-if="item.correct_option.length === 4">
                <van-field
                  v-model="inputvalue.value1"
                  :error="inputFlag.flag1"
                  label="1."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value2"
                  :error="inputFlag.flag2"
                  label="2."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value3"
                  :error="inputFlag.flag3"
                  label="3."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value4"
                  :error="inputFlag.flag4"
                  label="4."
                  placeholder="请输入答案"
                />
              </van-cell-group>
              <van-cell-group v-if="item.correct_option.length === 3">
                <van-field
                  v-model="inputvalue.value1"
                  :error="inputFlag.flag1"
                  label="1."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value2"
                  :error="inputFlag.flag2"
                  label="2."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value3"
                  :error="inputFlag.flag3"
                  label="3."
                  placeholder="请输入答案"
                />
              </van-cell-group>
              <van-cell-group v-if="item.correct_option.length === 2">
                <van-field
                  v-model="inputvalue.value1"
                  :error="inputFlag.flag1"
                  label="1."
                  placeholder="请输入答案"
                />
                <van-field
                  v-model="inputvalue.value2"
                  :error="inputFlag.flag2"
                  label="2"
                  placeholder="请输入答案"
                />
              </van-cell-group>
              <van-cell-group v-if="item.correct_option.length === 1">
                <van-field
                  v-model="inputvalue.value1"
                  :error="inputFlag.flag1"
                  label="1."
                  placeholder="请输入答案"
                />
              </van-cell-group>
            
            
              <van-button class="ensure" @click="inputSubmit(item)"
                >确定</van-button
              >
              <!-- 底部解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 判断题  b -->
            <div class="dragAnswer judju" v-if="item.type_id === 6">
              <van-cell>
                <template slot="icon">
                  <van-button
                    class="answericon"
                    round
                    size="mini"
                    type="info"
                    style="
                      backgroundColor: #f6ffed;
                      color: green;
                      border: 1px solid #b7eb8f;
                    "
                  >
                    判断题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <van-radio-group v-model="radio">
                    <div class="singleRadio" @click="radioSubmit(item)"  >
                      <van-radio  :checked-color="radioErr"    name="A"> </van-radio
                      ><span class="radiotype">A、 </span
                      ><span
                        class="radioText"
                        v-html="item.option.A.option"
                      ></span>
                    </div>
                    <div class="singleRadio"  @click="radioSubmit(item)">
                      <van-radio     name="B"> </van-radio
                      ><span class="radiotype">B、 </span
                      ><span
                        class="radioText"
                        v-html="item.option.B.option"
                      ></span>
                    </div>
                  </van-radio-group>
                </template>
              </van-cell>
            
              <!-- 底部解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 材料题 -->
            <div class="dragAnswer" v-if="item.type_id === 7">
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    材料题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <input type="checkbox" name="selected" value="82" /><label
                    for="checkbox"
                    >&emsp;123</label
                  >
                </template>
              </van-cell>
              <!-- 答案解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 选择题目 -->
    <van-overlay :show="showChose" class="showchose_test">
      <template slot="default">
        <van-cell
          :title="$route.query.title"
          :value="'共' + idList.length + '道题目'"
        ></van-cell>
        <van-grid :column-num="7">
          <van-grid-item
            v-for="(item, index) in idList"
            :key="index"
            :text="String(index + 1)"
            @click="torightWork(item, index + 1)"
          />
        </van-grid>
      </template>
    </van-overlay>
    <!-- 底部工具 -->
    <van-grid class="bottom-tools1" :column-num="3">
      <van-grid-item @click="collect()">
        <template slot="icon">
          <img
            class="icon-collect"
            v-if="toolsItem.collect_status"
            src="../../../assets/images/star-icon-2.png"
            alt=""
          />
          <img
            class="icon-collect"
            v-else
            src="../../../assets/images/star-icon.png"
            alt=""
          />
        </template>
      </van-grid-item>
      <van-grid-item @click="showEdit1 = true" icon="edit">
        <template slot="icon">
          <!-- {{ $store.state.homework.timeMsg }} -->
          {{ $store.state.homework.timeMsg }}
        </template>
      </van-grid-item>
      <van-grid-item @click="submit()">
        <template slot="icon">交卷 </template>
      </van-grid-item>
    </van-grid>
    <!-- 查看总分 -->
    <van-overlay class="submit" :show="showSubmit">
      <div class="submitContainer">
        <div class="title">
          <span>
            <div class="allsocre">{{ answerSubmit.correctScoreSum }}</div>
            <div class="allsocre1">分</div>
          </span>

          <span>
            <div>总分</div>
            <div class="red">11</div>
            <div>分</div>
          </span>

          <span>
            <div>本次考试耗时</div>
            <div class="red">00:00:13</div>
          </span>
        </div>
        <div class="body">
          <div class="box">
            <div class="child1">题型</div>
            <div class="child2">数量</div>
            <div class="child3">正确</div>
            <div class="child4">错误</div>
          </div>
          <div class="box">
            <div class="child1">单选</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">多选</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">简答</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">判断</div>
            <div class="child2">0</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">填空</div>
            <div class="child2">0</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
        </div>
        <div class="footer">
          <div class="center">本题无法判断对错,按正确积分</div>
          <van-button @click="showdetail1()" class="answer"
            >查看解析</van-button
          >
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { testOne, courseCollect, courseScore, postOneAnswer } from "@/api";
export default {
  data() {
    return {
      // 绑定填空题值
      inputvalue: {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
         value7: "",
        value8: "",
        value9: "",
        value10: "",
      },
      //表单校验
       inputFlag: {
        flag1: false,
        flag2: false,
        flag3: false,
        flag4: false,
        flag5: false,
        flag6: false,
        flag7: false,
        flag8: false,
        flag9: false,
        flag10: false,
      },
      value: "",
      //  单选题
      radio: null,
      radioErr:"",
      idList: [],
      resList: [],
      // 倒计时
      timeMin: null,
      // 当前页
      pageNumber: 1,
      // 控制题目跳转index
      active: 0,
      // 展示解析
      showdetail: false,
      //头部题目选择
      showChose: false,
      //总分
      answerSubmit: "",
      //展示提交
      showSubmit: false,
      //toosItems
      toolsItem: {},
      
    };
  },
  created() {
    this.getList1();
  },
  methods: {
    // 选择题目
    torightWork(id, index) {
      this.pageNumber = index;
      this.active = index - 1;
      this.showChose = false;
      // 清空状态   下一题状态要清空
      this.radio = "";
      this.radioErr = "";
      this.inputvalue= {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
        value7: "",
        value8: "",
        value9: "",
        value10: "",
      },
      this.inputFlag = {
        flag1: false,
        flag2: false,
        flag3: false,
        flag4: false,
        flag5: false,
        flag6: false,
        flag7: false,
        flag8: false,
        flag9: false,
        flag10: false,
      },
      // 工具栏
      this.toolsItem = this.resList.filter((item) => {
        return item.id == id;
      });
      //转化下数据类型  把[{…}, __ob__: Observer]   转化 {…}
      let itemArr = JSON.parse(JSON.stringify(this.toolsItem[0]));
      this.toolsItem = itemArr;
      //如果答题过有这一项  则根据题型 来赋值
       const flag = this.$store.state.homework.SimulatedRealTest.filter(
         (item) => {
           return item.Cid === this.toolsItem.id;
         }
       ) 
       if(flag.length!==0){
       if (this.toolsItem.type_id === 1||this.toolsItem.type_id === 6) {
          //单选  判断          
           this.radio=flag[0].Canswer  
          //检查对错   
       if(this.$store.state.homework.SimulatedRealState===true  ){        
          if (this.toolsItem.correct_option !== this.radio) {   
             this.radioErr = "#ee0a24";   
            } else {
             this.radioErr = "";
            }
           } 

        }else if(this.toolsItem.type_id===5)
        {
           //填空题
           //赋值给表单    目前最多6情况
        if (flag[0].Canswer.length === 1) {
          this.inputvalue.value1 = flag[0].Canswer[0];
        } else if (flag[0].Canswer.length === 2) {
          this.inputvalue.value1 = flag[0].Canswer[0];
          this.inputvalue.value2 = flag[0].Canswer[1];
        } else if (flag[0].Canswer.length === 3) {
          this.inputvalue.value1 = flag[0].Canswer[0];
          this.inputvalue.value2 = flag[0].Canswer[1];
          this.inputvalue.value3 = flag[0].Canswer[2];
        } else if (flag[0].Canswer.length === 4) {
          this.inputvalue.value1 = flag[0].Canswer[0];
          this.inputvalue.value2 = flag[0].Canswer[1];
          this.inputvalue.value3 = flag[0].Canswer[2];
          this.inputvalue.value4 = flag[0].Canswer[3];
        } else if (flag[0].Canswer.length === 5) {
          this.inputvalue.value1 = flag[0].Canswer[0];
          this.inputvalue.value2 = flag[0].Canswer[1];
          this.inputvalue.value3 = flag[0].Canswer[2];
          this.inputvalue.value4 = flag[0].Canswer[3];
          this.inputvalue.value5 = flag[0].Canswer[4];
        } else if (flag[0].Canswer.length === 6) {
          this.inputvalue.value1 = flag[0].Canswer[0];
          this.inputvalue.value2 = flag[0].Canswer[1];
          this.inputvalue.value3 = flag[0].Canswer[2];
          this.inputvalue.value4 = flag[0].Canswer[3];
          this.inputvalue.value5 = flag[0].Canswer[4];
          this.inputvalue.value6 = flag[0].Canswer[5];
        }   
        
        //如果 点击了查看解析  
        if(this.$store.state.homework.SimulatedRealState===true){                    
          this.checkInput()
          }
         }
       }
    },
    // 收藏
    async collect() {     
      try {
        const { data: res } = await courseCollect({
          questionId: this.toolsItem.id,
          uid: this.$store.state.uid,
        });
        this.toolsItem.collect_status = !this.toolsItem.collect_status;
      } catch (err) {
        console.log(err);
      }
    },
    //提交后获取分数
    async getScore() {
      try {
        const { data: res } = await courseScore({
          subjectId: this.$route.query.id,
          uid: this.$store.state.uid,
        });
        console.log(res, "答案");
        this.answerSubmit = res.data;
        this.showSubmit = true;
      } catch (err) {
        console.log(err);
      }
    },
    //提交试卷  对话框
    submit() {
      Dialog.confirm({
        title: "确认提交后不能修改",
        message: "是否提交试卷",
        confirmButtonText: "提交",
        confirmButtonColor: "#0486fe",
        cancelButtonText: "在检查下",
      })
        .then(() => {
          // on confirm  请求
          this.getScore();
        })
        .catch(() => {
          // on cancel
        });
    },
    // 显示解析
    showdetail1() {
      this.$store.commit("homework/SimulatedRealTestToTrue")
      this.showdetail = true;
      this.showSubmit = null;
    },
    /**@description     这里开始发送每一题请求
     *
     */
      // 判断是否答题过
       hasAnswer() {
       const flag = this.$store.state.homework.SimulatedRealTest.filter(
         (item) => {
           return item.Cid === this.toolsItem.id;
        }
       );
         if(flag.length!==0){
       return ture
       }else{
       return false
       }
     },
  // 定义请求  单选
    async postOneAnswer1(item) {
      // console.log(item,'item');
      const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: this.radio,
      };
      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
        //  存VUEX 数据持久化  ✔
        //  如果答题过 覆盖vuex中的值
        const flag = this.$store.state.homework.SimulatedRealTest.filter(
          (item) => {
            return item.Cid === this.toolsItem.id;
          }
        );
        // console.log(flag,'falg');vuex
        if (flag.length !== 0) {
          //  这里去重vuex
          // console.log("这里去重");
          this.$store.commit("homework/mapSimulatedRealTest", {
            Cid: item.id,
            Canswer: this.radio,
            typeId: item.type_id,
          });
        } else {
          // 这里推送 vuex
          //  console.log("这里推送");
          this.$store.commit("homework/addSimulatedRealTest", {
            Cid: item.id,
            Canswer: this.radio,
            typeId: item.type_id,
          });
        }       
        //跳转下一页
        this.active += 1;
        //页码顺序改变
        this.pageNumber += 1;
        //清空单选的值
        this.radio = "";
        // 工具栏
        this.toolsItem = this.resList[this.active]
      } catch (error) {
        console.log(error);
      }
    },
    radioSubmit(item) {
      //打印选择答案
      console.log(this.radio);
      console.log(item);
      this.postOneAnswer1(item);
    },
    //定义 填空题 请求
    async postOneAnswer2(item) {
      console.log(item.id, "请求");
      // 根据数组长度判断 提交个数
      let answer = [];
      if (item.correct_option.length === 5) {
        //  answer=[this.inputvalue.value1,this.inputvalue.value2,this.inputvalue.value3,this.inputvalue.value4]
        answer.push(this.inputvalue.value1);
        answer.push(this.inputvalue.value2);
        answer.push(this.inputvalue.value3);
        answer.push(this.inputvalue.value4);
        answer.push(this.inputvalue.value5);
      } else if (item.correct_option.length === 4) {
        answer.push(this.inputvalue.value1);
        answer.push(this.inputvalue.value2);
        answer.push(this.inputvalue.value3);
        answer.push(this.inputvalue.value4);
      } else if (item.correct_option.length === 3) {
        answer.push(this.inputvalue.value1);
        answer.push(this.inputvalue.value2);
        answer.push(this.inputvalue.value3);
      } else if (item.correct_option.length === 2) {
        answer.push(this.inputvalue.value1);
        answer.push(this.inputvalue.value2);
      }  else if (item.correct_option.length === 1) {
        answer.push(this.inputvalue.value1);
      }
      //  console.log(answer,'内容');
      const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: answer,
      };

      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
       //  存VUEX 数据持久化  ✔
        //  如果答题过 覆盖vuex中的值
        const flag = this.$store.state.homework.SimulatedRealTest.filter(
          (item) => {
            return item.Cid === this.toolsItem.id;
          }
        );
        // console.log(flag,'falg');vuex
        if (flag.length !== 0) {
          //  这里去重vuex
          // console.log("这里去重");
          this.$store.commit("homework/mapSimulatedRealTest", {
            Cid: item.id,
            Canswer: answer ,
            typeId: item.type_id,
          });
        } else {
          // 这里推送 vuex
          //  console.log("这里推送");
          this.$store.commit("homework/addSimulatedRealTest", {
            Cid: item.id,
            Canswer: answer,
            typeId: item.type_id,
          });
        }         
        // this.checkInput() 
        //跳转下一页
        this.active += 1;
        //页码顺序改变
        this.pageNumber += 1;
        //清空填空题的值
        this.inputvalue = { value1: "", value2: "", value3: "", value4: ""  , value5: "" };  
        // 工具栏
        this.toolsItem = this.resList[this.active]
       } catch (error) {
        console.log(error);
      }
    },
   //检查表单错误
    checkInput() {
      //判断答案是否正确
      if (this.inputvalue.value1 !== this.toolsItem.correct_option[0]) {
        this.inputFlag.flag1 = true;
      } else {
        this.inputFlag.flag1 = false;
      }
      if (this.inputvalue.value2 !== this.toolsItem.correct_option[1]) {
        this.inputFlag.flag2 = true;
      } else {
        this.inputFlag.flag2 = false;
      }
      if (this.inputvalue.value3 !== this.toolsItem.correct_option[2]) {
        this.inputFlag.flag3 = true;
      } else {
        this.inputFlag.flag3 = false;
      }
      if (this.inputvalue.value4 !== this.toolsItem.correct_option[3]) {
        this.inputFlag.flag4 = true;
      } else {
        this.inputFlag.flag4 = false;
      }
      if (this.inputvalue.value5 !== this.toolsItem.correct_option[4]) {
        this.inputFlag.flag5 = true;
      } else {
        this.inputFlag.flag5 = false;
      }
      if (this.inputvalue.value6 !== this.toolsItem.correct_option[5]) {
        this.inputFlag.flag6 = true;
      } else {
        this.inputFlag.flag6 = false;
      }
    },  
    inputSubmit(item) {
      this.postOneAnswer2(item);
    },
    /**
     * @description 获取页面数据
     */
    async getList1() {
      try {
        const { data: res } = await testOne({
          subjectId: this.$route.query.id,
          uid: this.$store.state.uid,
        });
        console.log(res.data, "模板");
        this.idList = res.data.idList;
        this.resList = res.data.list;
        this.timeMin = res.data.mins;
        this.toolsItem=res.data.list[0]
        console.log(this.resList, this.idList, "list");
        //判断是否开启过  答题
        if (this.$store.state.homework.timeAll != 0) {
          return;
        } else {
          this.$store.dispatch("homework/countTimeAction", this.timeMin);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>


//底部导航
.bottom-tools1 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 49px;
  img {
    width: 24px;
    height: 24px;
  }
}
//去掉标签页头部
/deep/div.van-tabs.van-tabs--line > div.van-tabs__wrap {
  display: none;
}
.dragAnswer {
   height: 600px; 
   background-color: #efeff4;
  /deep/.ensure {
    margin-top: 10px;
    background-color: #1890ff;
    font-size: 20px;
    width: 100%;
    color: #fff;
  }
  .van-cell{
    margin-bottom: 8px;
    overflow: hidden;
  }
}
.showchose_test {
  background-color: #fff;
}
//展示答案
/deep/.submit {
  background-color: rga(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .submitContainer {
    width: 296px;
    border-radius: 10px;

    background-color: #fff;
    .title {
      padding-bottom: 20px;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      text-align: center;
      /deep/.allscore1 {
        line-height: 55px;
      }
      > span {
        display: flex;
        justify-content: center;
        > div {
          color: #909399;
          font-size: 12px;
        }

        .red {
          color: #f68989;
        }
        .allsocre {
          color: #0486fe;
          font-size: 48px;
          font-weight: bold;
        }
        .allsocre1 {
          line-height: 55px;
          margin-left: 6px;
        }
      }
    }

    .box {
      display: flex;
      justify-content: space-between;

      div:nth-first-of-type() {
        font-weight: 600;
      }

      > div {
        width: 50px;
        height: 21px;
        margin-bottom: 12px;
        text-align: center;
      }
    }

    .footer {
      display: flex;
      flex-direction: column;
      text-align: center;
      .center {
        color: #b0b2b6;
      }
      .answer {
        margin-top: 25px;
        background-color: #04a9fe;
        width: 200px;
        height: 36px;
        margin-left: 40px;
        color: #fff;
      }
    }
  }
}
.singleRadio{
   background-color: #fff;
 
   height: 60px;
   margin: 10px; 
  display: flex;
  line-height: 60px;
  .van-radio{
    margin-left: 15px;
  }
  .radiotype{
    margin-left: 10px;
  }
}
//填空题内边距 变小
/deep/.van-field__label{
  width: 20px;
  margin-right: 5px;
}
.getAnswershow{
  /deep/.blue{
   color:#0486fe;
   span{
        color:#0486fe;
   }
  }
  }


  .judju{
      .van-cell{
        background-color:#efeff4;
  }
  }
  .van-cell-group{
    background-color:#efeff4;
  }
  .radioText{
    /deep/p{
      margin-top: 0px;
    }
  }
  .van-cell-group{
    padding: 0 15px;
  }
</style>
